<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">缺陷管理</el-breadcrumb-item>
            <el-breadcrumb-item>缺陷类型设置</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row :gutter="20">
                <el-col>
                    <el-button type="primary" class="button" @click="addflawVisible = true">
                        <i class="el-icon-circle-plus-outline"></i>
                        添加缺陷类型
                    </el-button>
                </el-col>
            </el-row>

            <el-table :data="defect" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="缺陷类型名称" prop="name"></el-table-column>
                <el-table-column label="状态（启用/未启用）" prop="status">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template>
                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini"
                                   @click="editflawVisible = true"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini"
                                   @click="removeUserById = true"></el-button>
                    </template>
                </el-table-column>
            </el-table>


            <!--分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
        </el-card>

        <!--添加缺陷类型-->
        <el-dialog
                title="添加缺陷类型"
                :visible.sync="addflawVisible"
                width="50%">
            <!--内容主体区-->
            <el-form ref="addflawFormRef" :model="addflaw" label-width="100px">
                <el-form-item label="缺陷类型名称" prop="">
                    <el-input v-model="addflaw.name"></el-input>
                </el-form-item>

                <el-form-item label="启用状态" prop="option">
                    <template>
                        <el-radio v-model="radio" label="1">启用</el-radio>
                        <el-radio v-model="radio" label="2">不启用</el-radio>
                    </template>
                </el-form-item>

            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addflawVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
            </span>
        </el-dialog>


        <!--修改缺陷类型-->
        <el-dialog
                title="修改缺陷类型"
                :visible.sync="editflawVisible"
                width="50%">
            <!--内容主体区-->
            <el-form ref="editflawFormRef" :model="editflaw" label-width="100px">
                <el-form-item label="缺陷类型名称" prop="name">
                    <el-input v-model="editflaw.name"></el-input>
                </el-form-item>

                <el-form-item label="启用状态" prop="option">
                    <template>
                        <el-radio v-model="radio" label="1">启用</el-radio>
                        <el-radio v-model="radio" label="2">不启用</el-radio>
                    </template>
                </el-form-item>

            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editflawVisible = false">取 消</el-button>
                <el-button type="primary" @click="amend">修 改</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import qs from 'qs'

    export default {
        name: "Defect_type",
        data() {
            return {
                /*获取用户列表的参数对象, 分页*/
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 2
                },
                total: 0,
                /*json*/
                defect: [],
                /*添加类型*/
                addflawVisible: false,
                addflaw: {},
                radio: '1',
                /*修改类型*/
                editflawVisible: false,
                editflaw: {}
            }
        },
        created() {
            this.getList()
        },
        methods: {
            async getList() {
                const {data: res} = await this.$http.post('/flaw/query', this.queryInfo)
                this.defect = res.data
            },
            /*监听 pagesize 改变的事件*/
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                this.getList()
            },
            /*监听页码值改变的事件*/
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage
                this.getList()
            },

            /*点击新增缺陷类型*/
            save() {
                this.$refs.addflawFormRef.validate(async valid => {
                    let data = qs.stringify(this.addflaw)
                    if (!valid) return
                    /*发起网络请求*/
                    const {data: res} = await this.$http.post('/polling/enact', data)
                    console.log(res)
                    if (res.code != 200) {
                        this.$message.error('添加用户失败')
                    }
                    this.$message.success('添加成功')
                    /*关闭对话框*/
                    this.addflawVisible = false
                    /*重新查询列表*/
                    this.getList()
                })
            },

            /*修改缺陷类型*/
            amend(){
                this.$refs.editflawFormRef.validate(async valid => {
                    let data = qs.stringify(this.editflaw)
                    if (!valid) return
                    /*发起请求*/
                    const {data: res} = await this.$http.post('/flaw/update',data)
                    if (res.code != 200){
                        this.$message.error('修改失败')
                    }
                    this.$message.success('添加成功')

                    /*关闭对话框*/
                    this.editflawVisible = false
                    /*重新查询列表*/
                    this.getList()
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .button {
        margin-left: 815px;
    }
</style>
